<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <!-- bootstrap -->
        <link href='http://twitter.github.io/bootstrap/2.3.2/assets/css/bootstrap.css' rel='stylesheet' type='text/css'/>
        <link href='http://twitter.github.io/bootstrap/2.3.2/assets/css/bootstrap-responsive.css' rel='stylesheet' type='text/css'/>
        <link href='http://twitter.github.io/bootstrap/2.3.2/assets/css/docs.css' rel='stylesheet' type='text/css'/>
    </head>
    <body>
        <div class="tutorial-show"></div>
        <script>
            var thisTutorial = {                
                 image: 'http://www.dickbaldwin.com/alice/PracticeTests/AliceSpashScreen.jpg',
                 intro: 'Bài hướng dẫn này sẽ giúp bạn cách tạo ra một đoạn hoạt hình ngắn trong thế giới Alice.<br/>Làm theo các bước dưới đây và sử dụng các hình để đối chiếu với giao diện Alice trên máy của bạn.',
                 steps: [
                            {
                                title: 'Chọn hình nền',
                                content: 'Khi mở Alice lên, điều đầu tiên cần làm là chọn một khung nền cho đoạn hoạt hình của bạn. Trong Alice cung cấp cho bạn tất cả 6 lựa chọn.<br/>Với bài hướng dẫn này, bạn chọn  khung nền <code>grass</code> và bấm vào nút <code>Open</code>',
                            },
                            {
                                title: 'Thư viện đối tượng',
                                content: 'Tiếp theo, chọn một <code>object</code> (đối tượng) cho Alice World. Alice có đầy đủ các đối tượng để thêm vào thế giới mà bạn muốn tạo ra.<br/>Bấm vào nút <code>Add Objects</code> màu xanh lá cây',
                            },
                            {
                                title: 'Thêm các đối tượng',
                                content: 'Bấm chọn vào thư mục chứa các đối tượng <code>animals</code> (động vật).<br/>Tìm một <code>bunny</code> (thỏ) và bấm vào nó.<br/>Sau đó, bấm vào <code>Add Instance to World</code>.<br/>Đối tượng bunny sẽ xuất hiện trong thế giới của bạn.<br/>Bấm vào nút <code>Done</code> màu xanh và chuyển sang phải để bắt đầu làm việc với đối tượng mới bunny mà bạn vừa thêm vào.</br>',
                            },
                            {
                                title: 'Tìm các Methods (phương thức)',
                                content: 'Trên màn hình Alice, bạn có thể nhìn thấy <code>method editor</code> (màn hình phương thức).<br/>Đây là vùng để giúp bạn biết là chú thỏ bạn vừa thêm vào có thể làm được những gì.<br/>Một phương thức là một câu lệnh mà bạn có thể nói với chú thỏ của bạn. Chú thỏ này đã được thiết kế sẵn để “biết” các lệnh này.<br/>Tìm danh sách đối tượng liệt kê các đối tượng trong thế giới của bạn, bên phía góc trái của màn hình, bấm vào <code>bunny.</code>',
                            },
                            {
                                title: 'Thêm các phương thức',
                                content: 'Dưới <code>object tree</code>, các phương thức, câu lệnh mà chú thỏ của bạn biết được hiện ra đầy đủ dưới dạng một danh sách<br/>Tìm nút <code>Do in order</code> (thực thi từng bước) ở phía dưới của màn hình chính và bấm kéo thả vào màn hình chính.<br/>Từ bây giờ, mỗi khi bạn kéo thả các phương thức vào trong phần <code>Do in order</code>, chúng sẽ được thực hiện từng phương thức một theo thứ tự đã định. ',
                            },
                            {
                                title: 'Thêm các phương thức (tiếp theo)',
                                content: 'Bấm vào phương thức <code>move</code> (di chuyển) trong danh sách các phương thức dưới danh sách các đối tượng.<br/>Kéo nó ngang qua màn hình soạn thảo và thả vào đầu của dòng lệnh <code>Do in order</code> như hình bên dưới',
                            },
                            {
                                title: 'Cụ thể hóa các phương thức',
                                content: 'Khi bạn thả phương thức <code>move</code> ra, bạn sẽ thấy một tùy chọn các phương thức của bạn – <code>direction</code> (hướng) mà bạn muốn chú thỏ di chuyển và di chuyển bao xa.<br/>Ở đây, chúng ta cho chú thỏ di chuyển về trước bằng cách chọn <code>up</code> ở phần <code>direction</code> rồi chuyển chuột qua phần <code>amount</code> và bấm chọn <code>1 meter</code> (di chuyển 1 mét).<br/>Câu lệnh đầu tiên của bạn đã hoàn tất.',
                            },
                            {
                                title: 'Hoàn chỉnh các phương thức',
                                content: 'Để chú thỏ có thể di chuyển về phía sau (sau bước nhảy về phía trước mà nó thực hiện ở trên), nhấp phải trên lệnh di chuyển bạn vừa tạo và chọn <code>copy</code>.<br/>Lệnh <code>move</code> của bạn sẽ được sao chép lại.<br/>Bấm chọn vào mũi tên nhỏ ở gần từ <code>up</code> (của câu lệnh thứ 2) và chuyển nó thành <code>down</code>.<br/>Tìm nút <code>play</code> ở phía trên bên trái của màn hình và bấm vào nó để có thể thấy chú thỏ của chúng ta di chuyển đúng với những câu lệnh đã tạo ra!',
                            },
                            {
                                title: 'Chỉnh sửa các phương thức',
                                content: 'Bây giờ bạn sẽ học cách thoát khỏi các phương thức mà bạn không cần dùng đến nữa.<br/>Giả sử như bạn không cần chú thỏ di chuyển lùi lại nữa.<br/>Bấm vào từ <code>move</code> trên câu lệnh <code>bunny move down</code> và di chuyển đưa câu lệnh này vào <code>trash can</code> (thùng rác) ở phía trên bên trái của cửa sổ chương trình.<br/>Khi khung bao phía ngoài của câu lệnh này cũng như của thùng rác chuyển thành màu xanh, bạn có thể thả chuột ra để xóa câu lệnh.',
                            },
                            {
                                title: 'Chỉnh sửa các phương thức (tiếp theo)',
                                content: 'Nếu bạn đã xóa (vô tình hay cố ý) một số câu lệnh hoặc đã làm một câu lệnh nào đó sai, bạn muốn phục hồi những gì vừa làm, bạn có thể bấm vào nút <code>Undo</code> ở phía trên bên trái màn hình (bên cạnh nút Play).<br/>Nút này sẽ hữu dụng trong rất nhiều trường hợp về sau.',
                            },
                            {
                                title: 'Thực hiện hai phương thức cùng lúc',
                                content: 'Nếu bạn muốn cho chú thỏ làm nhiều hơn một việc cùng một lúc, bạn sử dụng lệnh <code>Do Together</code> (làm cùng lúc).<br/>Giả sử bạn muốn chú thỏ vẫy tai và nói “ I love Alice!” cùng một lúc.<br/>Tìm nút <code>Do together</code> ở ở phía dưới của khung soạn thảo rồi kéo và thả nó vào khung soạn thảo tương tự như đã thực hiện với nút <code>Do in order</code> đã thực hiện.',
                            },
                            {
                                title: 'Di chuyển các bộ phận đặc biệt',
                                content: 'Để điều khiển tai của chú thỏ chuyển động, bấm vào dấu <code>+</code> gần dòng <code>bunny</code> trên danh sách đối tượng. Bạn sẽ thấy thêm các phần chi tiết hơn của thỏ.<br/>Sau đó, bấm chọn vào dấu <code>+</code> cạnh <code>upperBody</code> để tìm các đối tượng nhỏ hơn thuộc về đối tượng đó, tiếp tục thực hiện với head.<br/> Bây giờ bạn có thể thấy phần tai thỏ<br/>Để làm cho chú thỏ khoác tai, chúng ta sẽ sử dụng phương thức <code>turn</code>, và ra lệnh cho đôi tai di chuyển.<br/>Để nhìn thấy được các phương thức mà đôi tai thỏ có thể thực hiện, bấm vào <code>rightEar</code> và chúng ta sẽ thấy chúng hiện ra ở phía trái bên dưới của màn hình.<br/>Chọn phương thức <code>turn</code>, và kéo nó vào câu lệnh <code>Do Together</code> (thực hiện cùng lúc) trên màn hình soạn thảo.<br/>Để cho đôi tai thỏ đưa về phía trước, chọn hướng là <code>left</code> và sau đó chọn  <code>1/4 Revolution</code> để tai thỏ di chuyển 1/4 vòng tròn.',
                            },
                            {
                                title: 'Di chuyển các bộ phận đặc biệt (tiếp theo)',
                                content: 'Bây giờ bấm trên phần <code>leftEar</code> (tai trái của thỏ) sau đó tiến hành chỉnh sửa (trừ việc cho phép cái tai di chuyển sang trái và phải).',
                            },
                             {
                                title: 'Nói chuyện',
                                content: 'Sau khi cho chú thỏ khoát tai, chúng ta sẽ cho nó nói.<br/>Bấm vào nút <code>bunny</code> trên danh sách đối tượng để cho hiển thị danh sách các phương thức của thỏ.<br/>Sau đó bấm vào <code>bunny Say</code> và thả nó vào trong câu lệnh <code>Do Together</code> dưới các phương thức khác .<br/>Khi đó, sẽ có một menu nhỏ hiển thị<br/>Bấm vào mục <code>other</code> để gõ vào câu của chính bạn.<br/>Trong khung hiện lên, gõ vào câu <code>I love Alice!</code> (hoặc bất cứ câu nào bạn thích).<br/>Bấm nút <code>play</code> để xem thế giới bạn tạo ra trông như thế nào. ',
                            },
                            {
                                title: 'Căn chỉnh thời gian',
                                content: 'Bạn có thể nhận thấy rằng khi bạn <code>play</code> thế giới của bạn đã tạo nên thì câu nói của chú thỏ xuất hiện và biến mất rất nhanh chóng, nói chung là rất nhanh. Để có thể đọc được và ta cần chỉnh sửa lại! <br/>Nhìn vào dòng chữ trên các phương thức mà câu lệnh của thỏ nói.<br/>Trên dòng đó, bấm vào từ <code>more…</code> rồi bấm vào mũi tên nhỏ ngay bên cạnh đó.<br/>Bấm vào <code>duration</code> trên menu nhỏ xuất hiện ra. Bạn có thể thấy 1 second đã được chọn trước, ý nghĩa của nó chính là thời gian mà câu nói của thỏ hiện lên. Chúng ta cần nó dài hơn và bạn bấm vào <code>other</code>, gõ vào số 3 trên máy tính hiện lên.',
                            },
                            {
                                title: 'Đến lượt của bạn!',
                                content: 'Bây giờ click <code>play</code> thế giới Alice của bạn. Bạn có thể đọc được đoạn phát biểu của chú thỏ rồi!<br/>Chúc mừng bạn với thế giới Alice đầu tiên đã được tạo nên!.<br/>Đây chỉ mới là những thao tác rất cơ bản đối với Alice. Cố gắng thử thêm các phương thức khác của chú thỏ để tìm thấy những gì mà nó có thể làm được! Hãy khám phá nhé!',
                            },
                        ],
            }
        </script>
        
        <!-- begin extra script -->
        <!-- caution sprintf and jQuery must BEFORE tutorial.js -->
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>
        <script src='sprintf.min.js'></script>
        <script src='tutorial.js'></script>
        
        <!-- begin bootstraps script -->
        <script src='http://twitter.github.io/bootstrap/2.3.2/assets/js/jquery.js'></script>
        <script src='http://twitter.github.io/bootstrap/2.3.2/assets/js/bootstrap-transition.js'></script>
        <script src='http://twitter.github.io/bootstrap/2.3.2/assets/js/bootstrap-alert.js'></script>
        <script src='http://twitter.github.io/bootstrap/2.3.2/assets/js/bootstrap-modal.js'></script>
        <script src='http://twitter.github.io/bootstrap/2.3.2/assets/js/bootstrap-dropdown.js'></script>
        <script src='http://twitter.github.io/bootstrap/2.3.2/assets/js/bootstrap-scrollspy.js'></script>
        <script src='http://twitter.github.io/bootstrap/2.3.2/assets/js/bootstrap-tab.js'></script>
        <script src='http://twitter.github.io/bootstrap/2.3.2/assets/js/bootstrap-tooltip.js'></script>
        <script src='http://twitter.github.io/bootstrap/2.3.2/assets/js/bootstrap-popover.js'></script>
        <script src='http://twitter.github.io/bootstrap/2.3.2/assets/js/bootstrap-button.js'></script>
        <script src='http://twitter.github.io/bootstrap/2.3.2/assets/js/bootstrap-collapse.js'></script>
        <script src='http://twitter.github.io/bootstrap/2.3.2/assets/js/bootstrap-carousel.js'></script>
        <script src='http://twitter.github.io/bootstrap/2.3.2/assets/js/bootstrap-typeahead.js'></script>
        <script src='http://twitter.github.com/bootstrap/2.3.2/assets/js/bootstrap-affix.js'></script>
        <!-- end bootstraps script -->
        
        
    </body>
</html>